<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化封装</title>
    <style>
        #container {
            /*设置弹性布局*/
            display: flex;
        }

        .card {
            border: 1px solid red;
            width: 100px;
            height: 200px;
            margin-right: 10px;
        }

        .img_block {
            height: 110px;
        }

        .price_block {
            color: red;
        }
    </style>
</head>
<body>
<!--template 内部设定的是组件的视图模板-->
<template id="goods_card">
    <div class="card">
        <div class="img_block">
            <img :src="goods.imgUrl" alt="暂无图片">
        </div>
        <div class="des_block">
            <span>{{goods.description}}</span>
        </div>
        <div class="price_block">
            ￥<span>{{goods.price}}</span>
            销量:{{goods.salesCount}}
        </div>
    </div>
</template>

<!--使用组件-->
<div id="app">
    <div id="container">
        <!--根据数据进行封装-->
        <goods_card v-for="goods in goodsList" :goods="goods"/>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
        Vue组件化开发，Vue组件指的就是将一个需要被复用的
        html视图结构以及其对应的样式，还有js动态效果进行封装的技术，
        可以使用Vue中的Component进行组件化封装
    */
    // 使用Vue.extend()函数能够 创建出一个自定义组件
    let goods_card = Vue.extend({
        data: function () {
            return {
                goods: {
                    imgUrl: '',
                    description: '',
                    price: '',
                    salesCount: ''
                }
            }
        },
        // 父子组件通信，父组件可以借助于子组件的属性，给子组件进行传值，
        // 前提是在子组件中，通过props选项设置子组件的属性名
        props: {
            goods: {}
        },
        // 指定自定义组件模板的来源
        template: '#goods_card'
    });
    // 创建Vue实例
    new Vue({
        el: '#app',
        data: {
            goodsList: [{
                imgUrl: 'resource/goods01.png',
                description: 'JANUS儿童羊毛内衣 秋冬保暖秋',
                price: 359.0,
                salesCount: '1000+'
            },
                {
                    imgUrl: 'resource/goods02.png',
                    description: '心相印抽纸茶语纸巾面巾纸卫生纸',
                    price: 3.80,
                    salesCount: '100万+'
                },
                {
                    imgUrl: 'resource/goods03.png',
                    description: '立白天然亮白洗衣液护色护衣薰衣',
                    price: 11.90,
                    salesCount: '7万+'
                }
            ]
        },
        // 在Vue实例中注册组件，
        components: {
            // 在js中，主要是和 key=value 或 key: value形式相关的设置，如果key和value相同，
            // 那么只需要填入key即可
            // goodsCard: goodsCard
            goods_card
        }
    })
</script>
</html>